<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5725宿舍生活网站-首页</title>
    <style>
        /* 全局样式 */
        body {
            font-family: '微软雅黑', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        /* 头部样式 */
        header {
            background-color: #00f7ff;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header .logo {
            font-family: '手写体', cursive;
            font-size: 24px;
            color: #fff;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        nav ul li {
            margin-left: 20px;
        }

        nav ul li a {
            text-decoration: none;
            color: #fff;
            font-size: 18px;
        }

        /* Banner样式 */
        .banner .slider {
            display: flex;
            overflow: hidden;
        }

        .banner .slider img {
            width: 100%;
            height: auto;
        }

        /* 主要内容区域样式 */
        .main-content {
            padding: 20px;
        }

        .main-content h2 {
            font-family: '卡通字体', cursive;
            color: #333;
        }

        .gallery {
            display: flex;
            gap: 10px;
        }

        .gallery img {
            width: 48%;
            height: auto;
        }

        /* 底部样式 */
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            margin-top: 20px;
        }

        /* 新增互动功能样式 */
        .interaction-section {
            margin: 20px 0;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .vote-options {
            display: flex;
            gap: 15px;
            margin: 15px 0;
            flex-wrap: wrap;
        }

        .message-board {
            margin-top: 20px;
        }

        .message-item {
            border-bottom: 1px solid #eee;
            padding: 15px;
            margin: 10px 0;
            background-color: #fff;
            border-radius: 5px;
        }

        .message-author {
            color: #ffa500;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .results-bar {
            height: 20px;
            background-color: #eee;
            border-radius: 10px;
            margin: 10px 0;
            overflow: hidden;
        }

        .results-fill {
            height: 100%;
            background-color: #ffa500;
            transition: width 0.3s ease;
        }

        #messageForm {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 600px;
        }

        #author, #message {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }

        #message {
            height: 100px;
            resize: vertical;
        }

        button {
            background-color: #ffa500;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #ff8c00;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">5725宿舍生活网站-首页</div>
        <nav>
            <ul>
<<<<<<< HEAD:html/sy.html
                <li><a href="sy.html">首页</a></li>
                <li><a href="ssjs.html">宿舍介绍</a></li>
                <li><a href="sssh.html">宿舍生活</a></li>
                <li><a href="gywm.html">关于我们</a></li>
=======
                <li><a href="#home">首页</a></li>
                <li><a href="new_file.html">宿舍介绍</a></li>
                <li><a href="index.html">宿舍生活</a></li>
                <li><a href="#about">关于我们</a></li>
>>>>>>> 88e385556500267e3d22fd90f90170995a0e9586:html/index.html
            </ul>
        </nav>
    </header>

    <section class="banner">
        <div class="slider">
            <!-- <img src="banner1.jpg" alt="宿舍环境">
            <img src="banner2.jpg" alt="室友合照">
            <img src="banner3.jpg" alt="精彩活动"> -->
        </div>
    </section>

    <section class="main-content">
        <h1>欢迎来到大学生宿舍生活网站</h1>
		<p>宿舍环境</p>
        <p>这里是温暖的港湾，也是梦想的起点，欢迎来到5725宿舍。在这里，每一位同学都将开启一段难忘的大学生活，收获知识、友谊与成长。</p>
		<p>宿舍是同学们在校园里的第二个家，我们精心打造了舒适、整洁、安全的生活环境。每一间宿舍都配备了现代化的设施，如空调、热水器、独立卫生间等，确保同学们在学习之余能够得到充分的休息和放松。同时，我们还注重宿舍的通风采光，让阳光和清新的空气充满每一个角落，为大家营造出健康、舒适的居住氛围。</p>

        <h2>宿舍文化</h2>
        <p>我们倡导积极向上的宿舍文化，鼓励同学们在宿舍中开展丰富多彩的活动。无论是组织宿舍聚会、举办小型读书分享会，还是开展体育竞赛，都能让同学们在轻松愉快的氛围中增进彼此的了解和友谊。此外，我们还定期举办宿舍文化节，通过宿舍装饰比赛、才艺展示等活动，激发同学们的创造力和团队协作精神，共同打造一个充满活力和个性的宿舍文化氛围。</p>
		
        <h2>宿舍管理</h2>
		<p>为了保障同学们的生活安全和秩序，我们实行严格的宿舍管理制度。宿管人员24小时值班，随时为同学们提供帮助和服务。同时，我们还建立了完善的卫生检查制度和安全巡查机制，确保宿舍环境的整洁与安全。我们相信，良好的管理不仅是对同学们生命财产的保障，更是营造和谐宿舍氛围的重要基础。</p>
		
		<h2>联系我们</h2>
		<p>无论你有什么问题或建议，都可以随时与我们联系。我们的联系方式如下：
<p>宿管办公室电话：10086</p>
<p>宿管人员微信号：66668888</p>
<p>宿舍楼栋位置：五栋七楼25号</p>
<p>宿舍管理人电话：114514</p>
        <div class="gallery">
           <!-- <img src="moment1.jpg" alt="宿舍生活">
            <img src="moment2.jpg" alt="宿舍生活"> -->
        </div>

        <!-- 投票功能 -->
        <div class="interaction-section">
            <h2>本周活动投票</h2>
            <div class="vote-options">
                <label>
                    <input type="radio" name="vote" value="聚餐"> 周末聚餐
                </label>
                <label>
                    <input type="radio" name="vote" value="电影"> 电影之夜
                </label>
                <label>
                    <input type="radio" name="vote" value="游戏"> 桌游大赛
                </label>
            </div>
            <button onclick="submitVote()">立即投票</button>
            <div id="voteResults"></div>
        </div>

        <!-- 留言板功能 -->
        <div class="interaction-section message-board">
            <h2>留言板</h2>
            <form id="messageForm" onsubmit="return submitMessage(event)">
                <input type="text" id="author" placeholder="你的昵称（必填）" required>
                <textarea id="message" placeholder="留下你的祝福或建议...（必填）" required></textarea>
                <button type="submit">发布留言</button>
            </form>
            <div id="messagesContainer"></div>
        </div>

        <h2>友情链接</h2> 
        <ul>
            <li><a href="https://hceb.edu.cn/">学校网站</a></li>
			<li><a href="https://bilibili.com/">bilibili</a></li>
        </ul>
    </section>

    <footer>
        <p>&copy; 2025 宿舍生活. 版权所有.</p>
        <p>联系方式: dormlife@example.com</p>
    </footer>

    <script>
        // 初始化本地存储
        let votes = JSON.parse(localStorage.getItem('votes')) || { 聚餐: 0, 电影: 0, 游戏: 0 };
        let messages = JSON.parse(localStorage.getItem('messages')) || [];

        // 投票功能
        function submitVote() {
            const selected = document.querySelector('input[name="vote"]:checked');
            if (!selected) return alert('请先选择投票选项！');
            
            votes[selected.value]++;
            localStorage.setItem('votes', JSON.stringify(votes));
            updateResults();
        }

        function updateResults() {
            const total = Object.values(votes).reduce((a,b) => a+b, 0);
            let html = '';
            
            Object.entries(votes).forEach(([option, count]) => {
                const percent = total ? (count/total*100).toFixed(1) : 0;
                html += `
                    <div>${option}: ${count} 票 (${percent}%)</div>
                    <div class="results-bar">
                        <div class="results-fill" style="width: ${percent}%"></div>
                    </div>
                `;
            });
            
            document.getElementById('voteResults').innerHTML = html;
        }
        // 留言板功能
        function submitMessage(event) {
            event.preventDefault();
            
            const author = document.getElementById('author').value;
            const content = document.getElementById('message').value;
            
            const newMessage = {
                author: author,
                content: content,
                time: new Date().toLocaleString()
            };
            
            messages.unshift(newMessage);
            localStorage.setItem('messages', JSON.stringify(messages));
            
            renderMessages();
            event.target.reset();
        }

        function renderMessages() {
            const container = document.getElementById('messagesContainer');
            container.innerHTML = messages.map(msg => `
                <div class="message-item">
                    <div class="message-author">${msg.author}</div>
                    <div class="message-content">${msg.content}</div>
                    <div class="message-time" style="color:#666; font-size:0.9em">${msg.time}</div>
                </div>
            `).join('');
        }

        // 初始化加载数据
        window.onload = function() {
            updateResults();
            renderMessages();
        }
    </script>
</body>
</html>